<div class="page page-grids">

    <ol class="breadcrumb breadcrumb-small">
        <li>UI Elements</li>
        <li class="active"><a href="#na">Grids</a>
        </li>
    </ol>

    <div class="page-wrap">
        <!-- Row 1 -->
        <h4 class="h6 ml15">Grid System</h4>
        <div class="row">

            <div class="col-lg-12">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code class="small">.lg-12</code>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 2 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-6</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-6</code>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 3 -->
        <div class="row">
            <div class="col-lg-4">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4</code>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 4 -->
        <div class="row">
            <div class="col-lg-3">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-3</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-3</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-3</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-3</code>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 5 -->
        <div class="row">
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-2</code>
                    </div>
                </div>
            </div>
        </div>


        <h4 class="h6 ml15">Offsetting columns</h4>

        <div class="row">
            <div class="col-lg-4">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-4">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4.col-lg-offset-4</code>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 col-lg-offset-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4.col-lg-offset-2</code>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-2">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-4.col-lg-offset-2</code>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
                <div class="panel panel-default mb30">
                    <div class="panel-body">
                        <code>.col-lg-6 .col-lg-offset-3</code>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- #end page-wrap -->
</div>